<template>
  <div class="person">
    <h2>情况3：监听【reactive】定义的【对象】类型的数据</h2>
    <h3>姓名：{{ person.name }}</h3>
    <h3>年龄：{{ person.age }}</h3>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>

<script lang="ts" setup name="Person1">
  import {reactive,watch} from 'vue';
    //数据
    let person=reactive({
      name:"沐七",
      age:18
    })

    //方法
    function changeName(){
      person.name+="~"
    }
    function changeAge(){
      person.age+=1
    }
    function changePerson(){
      //reactive想修改整个对象，只能用Object的分配属性，且person的地址值不会变化
      Object.assign(person,{name:"沐玖",age:20})
    }

    //监视
    //监视reactive定义的对象，会默认开启深度监视，即方法1，2,3都会触发监视的回调函数
    watch(person,(newValue,oldValue)=>{
      console.log("person变化了");
    })

</script>

<style scoped>
.person{
    background-color: #8eace8;
    box-shadow: 0 0 10px;
    border-radius: 10px;
}
</style>